<template>
  <div>
    <h2>事件记录</h2>
    <el-table
      :data="infoList.records"
      border
      style="width: 60%"
      @current-change="handleTableChange"
    >
      <el-table-column prop="thingName" label="事件名称"> </el-table-column>
      <el-table-column prop="thingDate" label="日期"> </el-table-column>
      <el-table-column prop="areaName" label="发生位置"> </el-table-column>
      <el-table-column prop="thingScheme" label="防治方案"> </el-table-column>
      <el-table-column prop="thingStage" label="灾情状态"> </el-table-column>
    </el-table>
    <br />
    <el-pagination
      background
      layout="prev, pager, next"
      :total="infoList.pages * 10"
      @current-change="getPageNum"
    >
    </el-pagination>
    <br />
    <br />
    <el-row>
      <el-button plain @click="addThing()">添加事件</el-button>
      <el-button plain @click="getThingInfo()">查看事件信息</el-button>
      <br /><br />
      <el-button plain @click="apply()">申请专家会审</el-button>
      <el-button plain @click="updThing()">修改事件信息</el-button>
    </el-row>

    <fieldset style="width: 28%; border: 1px solid #606266" class="find">
      <legend style="color: #606266">事件查询</legend>
      <el-form :label-position="labelPosition" label-width="70px">
        <el-form-item label="事件名称">
          <el-input v-model="thingName"></el-input>
        </el-form-item>
        <el-form-item label="灾情状态">
          <el-input v-model="thingStage"></el-input>
        </el-form-item>
        <el-form-item label="发生位置">
          <el-input v-model="areaName"></el-input>
        </el-form-item>
        <el-form-item label="起始日期">
          <el-input v-model="startDate"></el-input>
        </el-form-item>
        <el-form-item label="结束日期">
          <el-input v-model="endDate"></el-input>
        </el-form-item>
      </el-form>
      <el-row>
        <el-button plain @click="find()">查询</el-button>
      </el-row>
    </fieldset>
  </div>
</template>

<script>
export default {
  data() {
    return {
      infoList: [],
      thingId: "",
      thingName: "",
      thingDate: "",
      areaName: "",
      thingScheme: "",
      thingStage: "",
      startDate: "",
      endDate: "",
      labelPosition: "left",
    };
  },
  methods: {
    async cutThingByItem(pageNo) {
      let paramObj = {
        pageNo: pageNo,
        pageSize: 2,
        thingName: null,
        thingStage: null,
        areaName: null,
        startDate: null,
        endDate: null,
      };
      let info = await this.ajax.getSubmit("/api/thing/info", paramObj);
      //console.log(info);
      this.infoList = info;
      //console.log(this.infoList.records);
    },
    getPageNum(val) {
      /*val就是我们点击是对应的页码*/
      //console.log(val)
      this.cutThingByItem(val);
    },
    handleTableChange(val) {
      //console.log(val);
      this.thingId = val.thingId;
    },
    async find() {
      let paramObj = {
        pageNo: 1,
        pageSize: 2,
        thingName: this.thingName,
        thingStage: this.thingStage,
        areaName: this.areaName,
        startDate: this.startDate,
        endDate: this.endDate,
      };
      let info = await this.ajax.getSubmit("/api/thing/info", paramObj);
      console.log(info);
      this.infoList = info;
    },
    addThing() {
      this.$router.push("/home/addThing");
    },
    getThingInfo() {
      //console.log(this.pestId)
      this.$router.push({
        path: "/home/thingInfo",
        query: { thingId: this.thingId },
      });
    },
    updThing() {
      this.$router.push({
        path: "/home/updateThing",
        query: { thingId: this.thingId },
      });
    },
    async apply() {
      let paramObj = {
        thingId: this.thingId,
        thingStage: "无法解决，申请专家会商",
      };
      let info = await this.ajax.getSubmit("/api/thing/stage", paramObj);
      console.log(info);
      this.cutThingByItem(1);
    },
  },
  created() {
    this.cutThingByItem(1);
  },
};
</script>

<style>
</style>